<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="./vue.js"></script>
</head>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <input type="button" value="添加" @click="add">
        </div>

        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in arr" :key="index">
                    <td>{{item.code}}</td>
                    <td>{{item.productName}}</td>
                    <td>{{item.timer}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
                <!-- 动态生成内容tr -->

            </table>
            <div class="add" style="text-align: center;" v-if="!arr.length">没有更多数据了</div>
        </div>
    </div>
</body>

</html>
<script>
    //需求:
    //1.列表渲染 
    //2.添加数据 用v-model绑定两个输入框,获取输入框的值,点击添加按钮的时候生成一个对象,使用push||unshift方法添加到arr数组
    //3.删除数据
    //使用splice方法来改变原数组,splice()中第一个参数是要删除的索引,所以必须要获得当前的索引
    const vm = new Vue({
        el: "#app",
        data: {
            code: "",
            productName: "",
            arr: [
                {
                    code: 1,
                    productName: "品如的衣柜",
                    timer: new Date().toLocaleTimeString()
                },
                {
                    code: 2,
                    productName: "世贤的骚",
                    timer: new Date().toLocaleTimeString()
                },
                {
                    code: 3,
                    productName: "坤坤的背带裤",
                    timer: new Date().toLocaleTimeString()
                }
            ]
        },
        methods: {
            add() {
                if (!this.code || !this.productName) {
                    return
                }

                let obj = {
                    code: this.code,
                    productName: this.productName,
                    timer: new Date().toLocaleTimeString()
                }
                this.arr.push(obj)

                this.code = "";
                this.productName = ""
            },
            del(index) {
                console.log(index);
                this.arr.splice(index, 1)
            }
        }
    })

</script>